<!--
 * @Description: 带分页功能的学生列表组件
 * @Author: charles
 * @Date: 2021-12-19 10:04:20
 * @LastEditors: 杜颖 3263107847@qq.com
 * @LastEditTime: 2025-09-26 09:35:02
-->
<template>
  <div class="student-list-container">
    <div class="header">
      <h2>学生列表</h2>
      <el-button type="primary" @click="handleAdd">添加学生</el-button>
    </div>
    
    <el-table 
      :data="paginatedStudents" 
      border 
      stripe 
      @row-click="handleRowClick"
      style="width: 100%; margin-top: 20px;"
    >
      <el-table-column 
        prop="id" 
        label="ID" 
        width="80" 
        align="center"
      ></el-table-column>
      <el-table-column 
        prop="name" 
        label="姓名" 
        width="120" 
        align="center"
      ></el-table-column>
      <el-table-column 
        prop="age" 
        label="年龄" 
        width="80" 
        align="center"
      ></el-table-column>
      <el-table-column 
        prop="gender" 
        label="性别" 
        width="80" 
        align="center"
      ></el-table-column>
      <el-table-column 
        prop="major" 
        label="专业" 
        align="center"
      ></el-table-column>
      <el-table-column 
        label="操作" 
        width="160" 
        align="center"
      >
        <template #default="scope">
          <el-button 
            size="small" 
            type="primary" 
            @click="toDetails(scope.row.id)"
          >
            详情
          </el-button>
          <el-button 
            size="small" 
            type="success" 
            @click="handleEdit(scope.row.id)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="students.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import studentData from './classData'

export default {
  data() {
    return {
      students: studentData,
      currentPage: 1, // 当前页码
      pageSize: 5 // 每页显示条数
    };
  },
  computed: {
    // 计算分页后的数据
    paginatedStudents() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      return this.students.slice(startIndex, startIndex + this.pageSize);
    }
  },
  methods: {
    // 跳转到详情页
    toDetails(id) {
      this.$router.push({
        path: "/sc/student/Details",
        query: { id }
      });
    },
    
    // 点击表格行查看详情
    handleRowClick(row) {
      this.toDetails(row.id);
    },
    
    // 编辑学生信息
    handleEdit(id) {
      this.$router.push({
        path: "/sc/student/Edit",
        query: { id }
      });
    },
    
    // 添加新学生
    handleAdd() {
      this.$router.push("/sc/student/Add");
    },

    // 每页显示条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置为第一页
    },

    // 当前页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style scoped>
.student-list-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>
    